<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="true" %>
<html>
<head>
    <title>用户管理</title>
    <base href="<%=request.getContextPath()%>/"/>
    <link rel="stylesheet" href="webjars/iview/3.4.0/dist/styles/iview.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/style.css">
    <script src="webjars/vue/2.6.10/dist/vue.js"></script>
    <script src="webjars/iview/3.4.0/dist/iview.js"> </script>
    <script src="webjars/axios/0.18.0/dist/axios.js"></script>
    <script>
        var ctx="<%=request.getContextPath()%>";
    </script>
</head>
<body>
    <div id="root">
        <modal title="上传附件" v-model="uploadFlag">
            <i-form :label-width="80">
                <form-item label="工作照：">
                    <upload action="jsp/upload" name="attach" :on-success="uploadSuccess" :before-upload="handleBeforeUpload" :multiple="false">
                        <i-button icon="ios-cloud-upload">请选择..</i-button>
                    </upload>
                    <div class="img" :style="{'background-image': 'url(' + img +')'}" v-if="img"></div>
                </form-item>
                <form-item label="照片描述：">
                    <i-input type="textarea" v-model="uploadForm.attachDescr"/>
                </form-item>
            </i-form>
        </modal>
        <modal title="修改用户" @on-ok="doUpdate" v-model="editFlag" width="650">
           <i-form :label-width="80">
                <row>
                    <i-col span="12">
                    <form-item label="登录名：">
                        <i-input v-model="editRow.userCode"/>
                    </form-item>
                    </i-col>
                    <i-col span="12">
                    <form-item label="密码：">
                        <i-input v-model="editRow.userPassword"/>
                    </form-item>
                    </i-col>
                    <i-col span="12">
                    <form-item label="姓名：">
                        <i-input v-model="editRow.userName"/>
                    </form-item>
                    </i-col>
                    <i-col span="12">
                    <form-item label="性别：">
                        <Radio-Group v-model="editRow.gender">
                            <Radio :label="1">
                                <Icon type="md-male"></Icon>
                                <span>男</span>
                            </Radio>
                            <Radio :label="2">
                                <Icon type="md-female"></Icon>
                                <span>女</span>
                            </Radio>
                        </Radio-Group>
                    </form-item>
                    </i-col>
                    <i-col span="12">
                    <form-item label="生日：">
                        <%--<i-input v-model="editRow.birthday"/>--%>
                        <date-picker v-model="editRow.birthday" type="date" format="yyyy-MM-dd"/>
                    </form-item>
                    </i-col>
                    <i-col span="12">
                    <form-item label="手机号码：">
                        <i-input v-model="editRow.phone"/>
                    </form-item>
                    </i-col>
                    <i-col span="24">
                    <form-item label="地址：">
                        <i-input type="textarea" v-model="editRow.address"/>
                    </form-item>
                    </i-col>
                </row>
           </i-form>
        </modal>
        <card>
            <i-button type="primary" icon="md-create" >添加用户</i-button>
            <i-button type="success" icon="md-finger-print" @click="daochu('word2pdf')">导出 Pdf</i-button>
            <i-button type="default" icon="md-print" @click="daochu('word')">导出 Word</i-button>
            <i-button type="info" icon="md-trending-up"  @click="daochu('excel')">导出 Excel</i-button>
        </card>
        <i-table :height="height" :data="data" :columns="columns" border stripe>
            <template slot="gender" slot-scope="{row}">
                <span>{{row.gender==1?"男":"女"}}</span>
            </template>
            <template slot="action" slot-scope="{row}">
            <i-button type="info" icon="md-build" size="small" @click="update(row)">修改</i-button>
            <i-button type="error" icon="md-trash" size="small">删除</i-button>
            <i-button type="warning" icon="md-cloud-upload" size="small" @click="upload(row)">上传附件</i-button>
            </template>
        </i-table>
        <page :total="total"
              :page-size="pageSize"
              show-sizer
              :page-size-opts="[4,8,12]"
             @on-change="changePageNo"
            @on-page-size-change="changePageSize"/>
    </div>
    <script>
        new Vue({
            el:"#root",
            data:{
                data:[],
                total:0,
                pageNo:1,
                pageSize:4,
                height:250,
                editFlag:false,
                editRow:{},
                uploadFlag:false,
                img:"",
                uploadForm:{
                    id:null,
                    attachPath:null,
                    attachDescr:null
                },
                columns:[
                    {title:"名称",key:"userCode"},
                    {title:"姓名",key:"userName"},
                    {title:"性别",key:"gender",width:80,slot:"gender"},
                    {title:"生日",key:"birthday"},
                    {title:"修改时间",key:"modifyDate"},
                    {title:"操作",width:260,slot:"action"}
                ]
            },
            methods:{
                search(){
                    axios.get(`${ctx}/jsp/userlist?pageIndex=${this.pageNo}&pageSize=${this.pageSize}`)
                        .then(({data})=>{
                            this.data=data.result.list;
                            this.total = data.result.total;
                        });
                },
                changePageNo(pageNo){
                    this.pageNo = pageNo;
                    this.search();
                },
                changePageSize(pageSize){
                    this.pageSize = pageSize;
                    this.height = pageSize*48+40;
                    this.search();
                },
                update(row){
                    Object.assign(this.editRow, row);
                    this.editFlag = true;
                },
                doUpdate(){
                    console.log(this.editRow);
                    axios.post(`${ctx}/jsp/userupdate`,Qs.stringify(this.editRow,{serializeDate:(date)=>{
                            return moment(date).format('YYYY-MM-DD');
                        }})).then(({data})=>{
                            iview.Message.warning(data.msg);
                            this.search();
                        });
                },
                upload(row){
                    this.uploadForm.id = row.id;
                    this.uploadFlag = true;

                },
                uploadSuccess(response){
                   iview.Message.success("上传成功！");
                   this.uploadForm.attachPath=response.result.filename;
                   console.log(response);
                },
                handleBeforeUpload (file) {
                    console.log(file);
                    const reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onloadend = () => {
                        this.img = reader.result;
                    }
                },
                daochu(fmt){
                    location.href = `${ctx}/jsp/`+fmt+`export`;
                }
            },
            mounted(){
                this.search();
            }
        });
    </script>
</body>
</html>
